import React from 'react';
import { Table, Button, Modal, message, Spin } from 'antd';
import Api from 'Utils/api';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import AddSubject from './AddSubject';
import './index.scss';

const confirm = Modal.confirm;
class QuestionBank extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      isLoading: true
    };
  }
  componentDidMount() {
    this.initData();
  }
  initData() {
    const self = this;
    self.setState({ isLoading: true });
    const api = new Api({
      method: 'GET',
      path: '/subjects',
      success: (json) => {
        self.setState({
          list: json,
          isLoading: false
        });
      },
      error: (msg) => {
        self.setState({
          isLoading: false
        });
        message.error(msg, 3);
      },
    });
    api.run();
  }
  generatorColumns() {
    return [
      {
        title: '测试类别',
        dataIndex: 'type',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '状态',
        dataIndex: 'state',
        render: text => (
          <span style={{ color: text ? '#00FFBF' : '#FFFFFF' }}>{ text ? '上架' : '下架'}</span>
        )
      },
      {
        title: '操作',
        dataIndex: 'operate',
        render: (text, record) => (
          <span className="operate">
            <span onClick={this.handleDown.bind(this, record)}>{record.state ? '下架' : '上架'}</span>
            <span className="see" onClick={this.handleSee.bind(this, record.id)}>问卷管理</span>
            <span className="edit" onClick={this.handleEdit.bind(this, record)}>修改</span>
            <span className="delete" onClick={this.handleDelete.bind(this, record.id)}>删除</span>
          </span>
        )
      }
    ];
  }
  handleEdit(record) {
    this.addModal.showModal(record);
  }
  handleSearch(value) {
    console.log(value);
  }
  handleDown(record) {
    const state = record.state ? '下架' : '上架';
    const self = this;
    confirm({
      title: state,
      content: `确定${state}该套题库吗？`,
      onOk() {
        const api = new Api({
          method: 'PATCH',
          path: `/subjects/handle/${record.id}`,
          query: {
            state: !record.state
          },
          success: () => {
            self.initData();
          },
          error: (msg) => {
            message.error(msg, 3);
          },
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  handleDelete(id) {
    const self = this;
    confirm({
      title: '删除',
      content: '确定删除该套题库吗？',
      onOk() {
        const api = new Api({
          method: 'DELETE',
          path: `/subjects/${id}`,
          success: () => {
            self.initData();
          },
          error: (msg) => {
            message.error(msg, 3);
          },
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  handleSee(id) {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/knowledge/question_type_mng/${id}`));
  }
  handleAdd() {
    this.addModal.showModal();
  }
  handleReload() {
    this.initData();
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <div className="table-wrap">
        <div className="btn-wrap">
          <Button className="search-btn" onClick={this.handleAdd.bind(this)}>
            <img src="images/page/icon_add.png" alt="" />
            新增类别
          </Button>
        </div>
        <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
          <Table
            rowKey={record => record.id}
            columns={columns}
            bordered
            dataSource={this.state.list}
            pagination={false}
          />
        </Spin>
        <AddSubject
          ref={(ref) => { this.addModal = ref; }}
          onOk={this.handleReload.bind(this)}
        />
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(QuestionBank);
